<template>
  <a-space direction="vertical" fill>
    <UploadFile
      ref="refUploadFile"
      v-model:fileList="fileList"
      :isShowRemove="!props.disabled"
      :disabled="props.disabled"
    />
  </a-space>
  <!-- request Content-Type isn't multipart/form-data -->
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { ref, reactive, computed, onMounted, watch } from 'vue';
  import { openChoiceFile } from '@/utils/file';
  import { PostUpload } from '@/api/order-management/client-management/base-setting';
  import axios from 'axios';
  import { getToken } from '@/utils/auth';
  import { FileUpload } from '@/utils/upload';
  // import { FileDownload } from '@/utils/filedownload';

  const emit = defineEmits(['update:values', 'setUpload']);
  const props = withDefaults(
    defineProps<{
      props: any;
      name?: string;
      required?: boolean;
      disabled?: boolean;
      values: any;
      regex?: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const isShow = ref(false);
  const isDownload = ref(false);

  let fileList = computed({
    get() {
      return props.props.data[0]
        ? [
            {
              fileUrl: props.props.data[0].fileAddr,
              fileName: props.props.data[0].name,
            },
          ]
        : [];
    },
    set(val: any[]) {
      const newProps: any = cloneDeep(props.props);
      if (val[0]) {
        newProps.data[0] = { addr: '', name: '', fileAddr: '' };
        newProps.data[0].addr = val[0].sourceAddr;
        newProps.data[0].name = val[0].fileName;
        newProps.data[0].fileAddr = val[0].fileUrl;
        emit('setUpload', newProps);
      } else {
        newProps.data = [];
        emit('setUpload', newProps);
      }
    },
  });

  // const Download = async () => {
  //   await FileDownload({ ...fileData.value });
  // };
</script>

<style scoped lang="less">
  .uploadFile {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px 8px 12px;
    overflow: hidden;
    font-size: 14px;
    background-color: var(--color-fill-1);
    border-radius: var(--border-radius-small);
    transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
    // margin-top: 10px;
  }
</style>
